/**
* 通用css样式布局处理
* Copyright (c) 2019 zpTest
*/

/** 基础通用 **/
.pt5 {
  padding-top: 5px;
}

.pr5 {
  padding-right: 5px;
}

.pb5 {
  padding-bottom: 5px;
}

.mt5 {
  margin-top: 5px;
}

.mt8 {
  margin-top: 8px;
}

.mr5 {
  margin-right: 5px;
}

.mb5 {
  margin-bottom: 5px;
}

.mb8 {
  margin-bottom: 8px;
}

.ml5 {
  margin-left: 5px;
}

.mt10 {
  margin-top: 10px;
}

.mr10 {
  margin-right: 10px;
}

.mb10 {
  margin-bottom: 10px;
}

.mb12 {
  margin-bottom: 12px;
}
.mb16 {
  margin-bottom: 16px;
}

.mb-10 {
  margin-bottom: -10px;
}

.ml10 {
  margin-left: 10px;
}

.mt20 {
  margin-top: 20px;
}

.mt30 {
  margin-top: 30px;
}

.mr20 {
  margin-right: 20px;
}

.mr150 {
  margin-right: 150px;
}

.mr100 {
  margin-right: 100px;
}

.mr80 {
  margin-right: 80px;
}

.mb20 {
  margin-bottom: 20px;
}

.ml20 {
  margin-left: 20px;
}

/** 左边距-40px */
.burden-ml40 {
  margin-left: -40px;
}

.ml50 {
  margin-left: 50px;
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
  font-family: inherit;
  font-weight: 500;
  line-height: 1.1;
  color: inherit;
}

// .el-dialog:not(.is-fullscreen) {
//   margin-top: 6vh !important;
// }

// 弹框垂直居中
.el-dialog:not(.is-fullscreen) {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-top: 0 !important;
  transform: translateX(-50%) translateY(-50%);
}

.el-dialog__body {
  padding: 20px;
}

.el-dialog__wrapper.scrollbar .el-dialog .el-dialog__body {
  overflow: auto;
  overflow-x: hidden;
  max-height: 70vh;
  padding: 10px 20px 0;
}

.el-table {
  .el-table__header-wrapper, .el-table__fixed-header-wrapper {
    th {
      word-break: break-word;
      background: rgb(237, 245, 255);
      color: rgb(0, 0, 0);
      height: 40px;
      font-size: 13px;
    }
  }

  .el-table__body-wrapper {
    .el-button [class*="el-icon-"] + span {
      margin-left: 1px;
    }
  }
}

/** 表单布局 **/
.form-header {
  font-size: 15px;
  color: #6379bb;
  border-bottom: 1px solid #ddd;
  margin: 8px 10px 25px 10px;
  padding-bottom: 5px
}

// label字体加粗
.el-form-item__label {
  font-weight: bold;
  color: #1e1e1e;
}

.search-form {
  .el-form-item {
    width: calc(25% - 10px);

    .el-form-item__content {
      width: calc(100% - 68px);

      .el-select, .el-date-editor {
        width: 100%;
      }
    }
  }
}

.half-search-form {
  .el-form-item:not(.search-opr-btns) {
    width: calc(33.3% - 10px);

    .el-form-item__content {
      width: calc(100% - 100px);

      .el-input, .el-input__inner, .el-select {
        width: 100% !important;
      }
    }
  }
}

.search-opr-btns {
  float: right;
}

.text-end {
  text-align: end;
}

/** 表格布局 **/
.pagination-container {
  position: relative;
  // height: 25px;
  margin-bottom: 10px;
  margin-top: 15px;
  // padding: 10px 20px !important;
}

/* tree border */
.tree-border {
  margin-top: 5px;
  border: 1px solid #e5e6e7;
  background: #FFFFFF none;
  border-radius: 4px;
}

.pagination-container .el-pagination {
  right: 0;
  position: absolute;
  width: 100%;
  margin-top: 3px;
  padding: 5px !important;
}

@media (max-width: 768px) {
  .pagination-container .el-pagination > .el-pagination__jump {
    display: none !important;
  }
  .pagination-container .el-pagination > .el-pagination__sizes {
    display: none !important;
  }
}

.el-table .fixed-width .el-button--mini {
  padding-left: 0;
  padding-right: 0;
  width: inherit;
}

/** 表格更多操作下拉样式 */
.el-table .el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
  margin-left: 5px;
}

.el-table .el-dropdown, .el-icon-arrow-down {
  font-size: 12px;
}

.el-tree-node__content > .el-checkbox {
  margin-right: 8px;
}

.list-group-striped > .list-group-item {
  border-left: 0;
  border-right: 0;
  border-radius: 0;
  padding-left: 0;
  padding-right: 0;
}

.list-group {
  padding-left: 0px;
  list-style: none;
}

.list-group-item {
  border-bottom: 1px solid #e7eaec;
  border-top: 1px solid #e7eaec;
  margin-bottom: -1px;
  padding: 11px 0px;
  font-size: 13px;
}

.pull-right {
  float: right !important;
}

.el-card__header {
  padding: 14px 15px 7px;
  min-height: 40px;
}

.el-card__body {
  padding: 15px 20px 20px 20px;
}

.card-box {
  padding-right: 15px;
  padding-left: 15px;
  margin-bottom: 10px;
}

/* button color */
.el-button--cyan.is-active,
.el-button--cyan:active {
  background: #20B2AA;
  border-color: #20B2AA;
  color: #FFFFFF;
}

.el-button--cyan:focus,
.el-button--cyan:hover {
  background: #48D1CC;
  border-color: #48D1CC;
  color: #FFFFFF;
}

.el-button--cyan {
  background-color: #20B2AA;
  border-color: #20B2AA;
  color: #FFFFFF;
}

/* text color */
.text-navy {
  color: #1ab394;
}

.text-primary {
  color: inherit;
}

.text-success {
  color: #1c84c6;
}

.text-info {
  color: #23c6c8;
}

.text-warning {
  color: #f8ac59;
}

.text-danger {
  color: #ed5565;
}

.text-muted {
  color: #888888;
}

/* image */
.img-circle {
  border-radius: 50%;
}

.img-lg {
  width: 120px;
  height: 120px;
}

.avatar-upload-preview {
  position: absolute;
  top: 50%;
  transform: translate(50%, -50%);
  width: 200px;
  height: 200px;
  border-radius: 50%;
  box-shadow: 0 0 4px #ccc;
  overflow: hidden;
}

/* 拖拽列样式 */
.sortable-ghost {
  opacity: .8;
  color: #fff !important;
  background: #42b983 !important;
}

.top-right-btn {
  position: relative;
  float: right;
}

.header-title {
  span:not(.title-span) {
    color: #606266;
  }

  .title-span {
    font-size: 16px;
    margin-right: 10px;
    color: #475ba7;
  }
}

::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 8px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 8px;
}

::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  width: 8px;
  border-radius: 8px;
  background: #ccc;
}

::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  background: #ffffff;
}

// form 中 单选框下边距
.select-margin {
  margin-top: -5px;
}

.group-menu-tree {
  height: 385px;
  overflow-y: auto;
  border: 1px solid #e6ebf5;
  border-radius: 4px;

}

.tree-div {
  background-color: #F5F7FA;
  border: 1px solid #e6ebf5;
  padding-left: 15px;
}

/** el-tree 取消自带边框 */
::v-deep .tree-border {
  border: 0px solid #e5e6e7
}

///** form 中label字体加粗 */
//.el-form-item--mini .el-form-item__label {
//    line-height: 28px;
//    font-weight: 600;
//}

/** 多选框 */
.checkbox-div {
  height: 600px;
  overflow-y: auto;
}

/** 多选框 */
.checkbox-item {
  width: 200px;
  margin-bottom: 10px
}

/** 弹出框标题字体大小 */
.span-font {
  font-size: 18px;
}

/** 左侧科室树、机构树高度 */
.div-height-left {
  height: 100%;
}

/** 人员分配科室树高度 */
.dept-tree-height {
  height: 646px;
}


.el-drawer__header {
  margin-bottom: 0;
}

/* 用来设置当前页面element全局table 鼠标移入某行时的背景色*/
.el-table--enable-row-hover .el-table__body tr:hover > td {
  background-color: #a5dffa !important;
  color: #f19944;
}

.el-table--enable-row-hover .el-table__body tr:hover > td > div > a > span {
  color: #f19944;
}

///* 列表点击行高亮 */
.el-table__body tr.current-row > td {
  background-color: #00c0ef !important;
  color: #fff;
}

//// el-form-item 标签字体加粗
//.el-form-item--small .el-form-item__label {
//    font-weight: bold;
//}

.vue-treeselect__control {
  height: 0 !important;
  border: 1px solid #26b9ff !important;
}

.el-form-item--mini {
  margin-bottom: -2px;
}

.el-form-item__content {
  margin-bottom: -2px;
}

// input框边框颜色
.el-input__inner {
  border: 1px solid #26b9ff;
}

.el-table {
  border: 1px solid #a5a5a5;
}

.el-table td.el-table__cell {
  border-bottom: 1px solid #a5a5a5;
}

.el-table td.el-table__cell {
  border-right: 1px solid #a5a5a5;
}

.el-table th.el-table__cell.is-leaf {
  border-bottom: 1px solid #a5a5a5;
  border-right: 1px solid #a5a5a5;
}

.el-table .cell {
  padding-left: 5px;
  padding-right: 5px;
  //color: #1e1e1e;
}

.tree-margin {
  margin-bottom: -2px;
}

.fz14 {
  font-size: 14px;
}

.fz18 {
  font-size: 18px;
}

.fz19 {
  font-size: 19px;
}

.fz20 {
  font-size: 20px;
}

.fz24 {
  font-size: 24px;
}

.fw-bold {
  font-weight: bold;
}

.font-color-red {
  color: #ff0003;
}

.font-color-black {
  color: #000000;
}

// 科室树组件label宽度
.dept-tree-label {
  width: 20%;
}

// 科室树组件label下拉框宽度
.dept-tree-label > div {
  width: 65% !important;
}

.el-tree-node__label {
  color: #1e1e1e;
}

.requiredClass > div.cell::before {
  content: "*";
  color: #f56c6c;
  margin-right: 4px;
}

.import-master {
  width: 68%;
  float: left;
  margin-top: 1px
}
/** 首页快捷菜单外部div */
.fast-item {
  float: left;
  height: 30px;
  width: 190px;
  transition: 1s;
  margin: 5px 5px 5px 0;
  border: solid 1px #027687;
  border-radius: 5px;
  white-space: nowrap;
}

.fast-item:hover {
  transform: scale(0.8);
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -o-transform: scale(1.1);
  -ms-transform: scale(1.1);
}

.box-card {
  border: solid 1px #027687
}

.el-card__header {
  border-bottom: solid 1px #027687;
}

.el-button--success {
  color: #FFFFFF;
  background-color: #419164;
  border-color: #419164;
}

.el-button--danger {
  color: #FFFFFF;
  background-color: #b32727;
  border-color: #b32727;
}

.el-button--warning {
  color: #FFFFFF;
  background-color: #c2951b;
  border-color: #c2951b;
}

.search-container {
  padding: 18px 0 0 10px;
  margin-bottom: 10px;
  background-color: var(--el-bg-color-overlay);
  border: 1px solid var(--el-border-color-light);
  border-radius: 4px;
  box-shadow: var(--el-box-shadow-light);
}
/** 防重复提交 利用动画实现 节流
  pointer-events 属性
属性值 ：all / none
all : 可以触发该元素绑定的监听事件 ；
none : 无法触发绑定的监听事件 ；
优势
① 十分 简单，不需要操作 JS ；
② 可以发挥 CSS 「选择器」 的优势，批量 设置「节流」；
缺点
① 页面刚进入，也要等动画 （animation）时间；
② 可以通过控制台 ，修改样式，绕过节流 ，所以一些重要的功能，不能使用；
*/
.ckeck-btn {
    pointer-events: all;
    animation: btnAnim 0.5s step-end forwards;
}

.ckeck-btn:active {
    animation: none
}

@keyframes btnAnim {
    from {
        pointer-events: none;
    }

    to {
        pointer-events: all;
    }
}
/** 处理el-input添加属性clearable后样式（宽）发生变化 问题 */
.el-input__wrapper {
    position: relative;

    .el-input__inner {
        padding-right: 18px;
    }

    .el-input__suffix {
        position: absolute;
        right: 8px;
        top: 50%;
        transform: translateY(-50%);
    }
}


//.el-table__body tr.current-row > td >div> button>span {
//    background-color: #00c0ef !important;
//    color: #fff;
//}
//.el-table__body tr.current-row > td >div> button>i {
//    background-color: #00c0ef !important;
//    color: #fff;
//}

//.el-table tr {
//    //background-color: #e6e6e6;
//    background-color: #e9fff5;
//}

/** table边框颜色 */
//.el-table--border:after,
//.el-table--group:after,
//.el-table:before {
//    background-color: #2f2f2f;
//}
//
//.el-table--border,
//.el-table--group {
//    border-color: #2f2f2f;
//}
//
//.el-table td,
//.el-table th.is-leaf {
//    border-bottom: 1px solid #2f2f2f !important;
//    border-right: 1px solid #2f2f2f !important;
//}
//
//.el-table--border th,
//.el-table--border th.gutter:last-of-type {
//    border-bottom: 1px solid #2f2f2f;
//}
//
//.el-table--border td {
//    border-right: 1px solid #2f2f2f;
//}
